<!-- 用Vant库的代码 -->
<template>
    <!-- 双向绑定currentIndex,则不用监听点击 -->
    <van-tabbar route v-model="currentIndex" active-color=var(--primary-color)>
        <van-tabbar-item repalce v-for="(item, index) in tabbarData" :to="item.path">
            <span>{{ item.text }}</span>
            <template #icon>
                <img :src="currentIndex === index ? getAssetsUrl(item.imageActive) : getAssetsUrl(item.image)" />
            </template>
        </van-tabbar-item>
    </van-tabbar>
</template>

<script setup>
import tabbarData from '@/assets/data/tabbarData'
import { getAssetsUrl } from '@/utils/load_assets'
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

const currentIndex = ref(0)
const route = useRoute()

watch(route, (newRoute) => {
    const index = tabbarData.findIndex(item => item.path === newRoute.path)
    // path不在tabBar的情况,如city
    if (index === -1) return
    currentIndex.value = index
})
</script>

<style lang="less" scoped>
:deep(.van-tabbar-item) {
    height: 50px;

    img {
        height: 30px;
    }
}
</style>